import React, { Component } from 'react';

import './index.less';
import { base } from 'nc-lightapp-front'

const {
    NCCheckbox, NCFormControl , NCAutoComplete 
} = base;
import { getColor } from '../../utils/utils';

import AutoComplete from 'bee-autocomplete';
require('bee-autocomplete/build/AutoComplete.css');

const { color, bgColor } = getColor();

/**
 * 
 * leftData : {
 *      key: 11,
 *      display: <div>ddd</div>,
 *      data: {
 *          name: ''
 *      }
 * }
 * 
 * rightData: => 格式与leftData相同 leftData
 * onChange    function (leftData, rightData)
 * 
 * leftTitle : 
 * rightTitle : 
 */

const allCheckTable = {
    all: {
        checked: true
    },
    none: {
        checked: false
    },
    part: {
        checked: false,
        indeterminate: true
    }
};

class Transfer extends Component {
    constructor(props) {
        super(props);
        this.state = {
            leftAllChecked: '', // 左侧全选按钮状态，all, none，part
            rightAllChecked: '', // 右侧全选按钮状态，all, none，part
            leftChecked: {},
            rightChecked: {},
            leftCheckedCount: 0,
            rightCheckedCount: 0,
            leftData: props.leftData,
            rightData: props.rightData,
            leftArrowDisabled: true, // 向左的箭头禁用
            rightArrowDisabled: true, // 向右的箭头禁用

            leftSearchKeyWord: '',   //左侧搜索值
            rightSearchKeyWord: '', //右侧搜索值

            language: {}, // 多语言
            checkDisabled: false,// 默认显示多选框
            single: props.single ? true : false,//是否启用单选模式 默认值为false
            singleLeft: props.leftData && props.leftData.length ? props.leftData.map((item, index) => {
                return false
            }) : [] ,

            autoCompleteOptions: props.leftData && props.leftData.length ? props.leftData.map((item, index) => {
                return `${item.display}(${item.realcode})`
            }) : [] ,
            autoCompleteValue: '',
        };

        this.changeCheckBox = this.changeCheckBox.bind(this);
        this.changeAllCheckbox = this.changeAllCheckbox.bind(this);
        this.toChange = this.toChange.bind(this);
        this.getLanguage = this.getLanguage.bind(this);
    }

    onAutoCompleteChange = value => {
        this.setState({
            autoCompleteValue: value
        });
    };

    onSelectOption = (value) => {
        let leftData = this.state.leftData;
        let rightData = this.state.rightData;
        let newLeftData = [];

        if (leftData.find(function (item) {
            let tempvalue = `${item.display}(${item.realcode})`
            if (tempvalue.indexOf(value) != -1) {
                newLeftData.push(item);
            }
        }) != undefined) {
            return;
        }
        this.setState({ leftData: newLeftData }, () => {
            if (this.props.onChange) {
                this.props.onChange(newLeftData, rightData);
            }
        })
    }

    autoCompleteKeyUp = (event) => {
        return
        if (event.keyCode === 13) {
            let autoCompleteValue = this.state.autoCompleteValue;
            let leftData = this.state.leftData
            let newLeftData = [];

            if (leftData.find(function (item) {
                let tempvalue = `${item.display}(${item.realcode})`
                if (tempvalue.indexOf(autoCompleteValue) != -1) {
                    newLeftData.push(item);
                }
            }) != undefined) {
                return;
            }
            this.setState({ leftData: newLeftData }, () => {
                if (this.props.onChange) {
                    this.props.onChange(newLeftData);
                }
            })
        }
    }

    componentDidMount() {
        this.getLanguage();
    }

    getLanguage() {
        this.props.MultiInit.getMultiLang({
            domainName: 'hrpub',
            moduleId: 'hrpub',
            callback: (json, status, init) => {
                this.setState({
                    language: json
                });
            }
        });
    }

    toChange(direction) {
        return async () => {
            let {
                leftData,
                rightData,
                leftChecked,
                rightChecked,
                single
            } = this.state;

            if ('leftData' in this.props) {
                leftData = this.props.leftData
            }
            if ('rightData' in this.props) {
                rightData = this.props.rightData
            }
            if (
                (direction === 'toRight' && Object.keys(leftChecked).length <= 0)
                || (direction === 'toLeft' && Object.keys(rightChecked).length <= 0)
            ) {
                return;
            }
            let source = direction === 'toRight' ? [...leftData] : [...rightData];
            let target = direction === 'toRight' ? [...rightData] : [...leftData];
            let checked = direction === 'toRight' ? leftChecked : rightChecked;

            let nSource = [];
            let singleResult = []
            source.map((item, index) => {
                if (checked[item.key] && checked[item.key].status) {
                    if (target.length > index) {
                        target.splice(index, 0, item);
                    }
                    else {
                        target.push(item);
                    }
                }
                else {
                    nSource.push(item);
                }
            });

            if (direction === 'toLeft') {
                let tmp = nSource;
                nSource = target;
                target = tmp;
                if (single) {
                    singleResult = nSource.map((item, index) => {
                        return false
                    })
                }
            }
            if (direction === 'toRight' && single && nSource.length != 0) {
                singleResult = nSource.map((item, index) => {
                    return true
                })
            } else if (direction === 'toRight' && !single) {
                singleResult = nSource.map((item, index) => {
                    return false
                })
            }
            await this.setState({
                leftData: nSource,
                rightData: target,
                singleLeft: singleResult,
                leftChecked: {},
                rightChecked: {},
                leftCheckedCount: 0,
                rightCheckedCount: 0,
                leftAllChecked: 'none',
                rightAllChecked: 'none',
            });
            if (this.props.onChange) {
                this.props.onChange(nSource, target);
            }
        }
    }

    changeAllCheckbox(type) {
        return (status) => {
            let {
                leftData,
                rightData,
            } = this.state;
            if ('leftData' in this.props) {
                leftData = this.props.leftData
            }
            if ('rightData' in this.props) {
                rightData = this.props.rightData
            }

            let nChecked = {};

            let data = type === 'left' ? leftData : rightData

            data.map((item) => {
                nChecked[item.key] = {
                    status: status,
                    data: item
                };
            });

            let checkedName = `${type}Checked`;
            let checkedAllName = `${type}AllChecked`;

            let typeCount = `${type}CheckedCount`;

            this.setState({
                [checkedName]: nChecked,
                [checkedAllName]: status ? 'all' : 'none',
                [typeCount]: status ? data.length : 0
            });
        }
    }

    changeCheckBox(item, type, index) {
        return (status) => {
            let {
                leftChecked,
                leftCheckedCount,
                rightChecked,
                rightCheckedCount,
                leftData,
                rightData,
                single,
                singleLeft
            } = this.state;
            if ('leftData' in this.props) {
                leftData = this.props.leftData
            }
            if ('rightData' in this.props) {
                rightData = this.props.rightData
            }
            let allChecked = '';
            let nCount = 0;

            if (type === 'left') {
                nCount = status ? leftCheckedCount + 1 : leftCheckedCount - 1;
            }
            else {
                nCount = status ? rightCheckedCount + 1 : rightCheckedCount - 1;
            }

            if (nCount === 0) {
                allChecked = 'none';
            }
            else if (
                (type === 'left' && nCount === leftData.length)
                || (type === 'right' && nCount === rightData.length)
            ) {
                allChecked = 'all';
            }
            else {
                allChecked = 'part';
            }

            if (type === 'left') {
                if (single && typeof index === 'number') {
                    let resultLeftData = [];
                    if (status === false) {
                        resultLeftData = singleLeft.map((it, i) => {
                            it = false
                            return it
                        })
                    } else {
                        resultLeftData = singleLeft.map((it, i) => {
                            if (index !== i) {
                                it = true
                            }
                            return it
                        })
                    }
                    this.setState({
                        singleLeft: resultLeftData
                    })
                }
                this.setState({
                    leftChecked: {
                        ...leftChecked,
                        [item.key]: {
                            status: status,
                            data: item
                        }
                    },
                    leftCheckedCount: nCount,
                    leftAllChecked: allChecked
                }, () => {
                    if (this.props.onChecked) {
                        this.props.onChecked && this.props.onChecked(type, this.state.leftChecked);
                    }
                });
            }
            else {
                this.setState({
                    rightChecked: {
                        ...rightChecked,
                        [item.key]: {
                            status: status,
                            data: item
                        }
                    },
                    rightCheckedCount: nCount,
                    rightAllChecked: allChecked
                }, () => {
                    this.props.onChecked && this.props.onChecked(type, this.state.rightChecked);
                });
            }
        }
    }

    componentWillReceiveProps(props) {
        if (this.props.leftData !== props.leftData) {
            this.state.leftAllChecked = 'none'
        }
        if (this.props.checkDisabled !== undefined) {
            this.state.checkDisabled = props.checkDisabled

            this.state.leftChecked = {}
            this.state.rightChecked = {}
            this.state.leftCheckedCount = 0
            this.state.rightCheckedCount = 0
            this.state.leftAllChecked = 'none'
            this.state.rightAllChecked = 'none'

        }
        this.setState(this.state);
    }

    leftSearchOnChange = (param) => {
        this.setState(param);
        return
        let leftData = this.state.leftData
        let newLeftData = [] ;

        //增加单号查重操作
        if (leftData.find(function (item) {
            if(item.display.indexOf(param.leftSearchKeyWord) != -1 
                || item.realcode.indexOf(param.leftSearchKeyWord) != -1){
                newLeftData.push(item);
            }
        }) != undefined) {
            return;
        }
        this.setState({ leftData: newLeftData , param }, () => {
            if (this.props.onChange) {
                this.props.onChange(newLeftData);
            }
        })
    }

    onSearch = (value, e) => {
        let leftData = this.state.leftData
        let rightData = this.state.rightData
        let newLeftData = [] ;

        if (leftData.find(function (item) {
            if(item.display.indexOf(value) != -1 
                || item.realcode.indexOf(value) != -1){
                newLeftData.push(item);
            }
        }) != undefined) {
            return;
        }
        this.setState({ leftData: newLeftData }, () => {
            if (this.props.onChange) {
                this.props.onChange(newLeftData,rightData);
            }
        })
    }


    render() {
        const {
            leftTitle,
            rightTitle,
            leftData: propsLeftData,
            rightData: propsRightData,
            leftCheckTitle, //左多选框标题
            rightCheckTitle, //右多选框标题
            className,
            style = {}
        } = this.props;

        let {
            leftAllChecked,
            leftChecked,
            rightAllChecked,
            rightChecked,
            leftData = [],
            rightData = [],
            leftCheckedCount,
            rightCheckedCount,
            language,
            checkDisabled,
            single,
            singleLeft
        } = this.state;

        propsLeftData && (leftData = propsLeftData)
        propsRightData && (rightData = propsRightData);

        let rightArrowDisabled = leftCheckedCount <= 0;
        let leftArrowDisabled = rightCheckedCount <= 0;

        return (
            <div
                className={`transfer-wrapper ${className || ''}`}
                style={style}
            >
                <div className="transfer-box">
                    {
                        !leftTitle && !rightTitle ? null :
                            <div className="transfer-list-title">
                                {leftTitle ? leftTitle : ''}
                            </div>
                    }
                    <div className="transfer-left-wrapper">
                        <div className="transfer-title-wrapper">
                            <If condition={!single}>
                                <NCCheckbox
                                    disabled={checkDisabled}
                                    {...allCheckTable[leftAllChecked]}
                                    onChange={this.changeAllCheckbox('left')}
                                >
                                    {leftCheckTitle || language['hrpub-000071']/** 全选 */}
                                </NCCheckbox>
                            </If>
                        </div>
                        {/* <div className="transfer-search-wrapper">
                            <NCFormControl
                                type="search"
                                onSearch={this.onSearch}
                                onChange={(value) => this.leftSearchOnChange({ 'leftSearchKeyWord': value })}
                                placeholder='搜索'
                                value={this.state.leftSearchKeyWord}
                            />
                        </div> */}
                        <div className="transfer-search-wrapper">
                            <AutoComplete
                                placeholder="搜索"
                                style={{width: '100%'}}
                                value={this.state.autoCompleteValue}
                                onKeyDown={(e)=>this.autoCompleteKeyUp(e)}
                                options={this.state.autoCompleteOptions}
                                onValueChange={value => this.onAutoCompleteChange(value)}
                                onSelectOption={value => this.onSelectOption(value)}
                            />
                        </div>
                       {leftData.map((item, index) => {
                            return (
                                <div className="transfer-item-wrapper">
                                    {item.prefix || null}
                                    <NCCheckbox
                                        disabled={!single ? checkDisabled : this.state.singleLeft[index]}
                                        checked={leftChecked[item.key] && leftChecked[item.key].status}
                                        onChange={this.changeCheckBox(item, 'left', index)}
                                    >
                                        {`${item.display}(${item.realcode})`}
                                    </NCCheckbox>
                                    {item.suffix || null}
                                </div>
                            );
                        })}
                    </div>
                </div>
                <div className="transfer-operation-wrapper">
                    <div className="transfer-operation-button-list">
                        <div
                            className={`transfer-operation-button-wrapper ${rightArrowDisabled && 'disabled'}`}
                            onClick={this.toChange('toRight')}
                            style={{
                                // color: color,
                                // backgroundColor: bgColor
                            }}
                        >
                            {'>'}
                        </div>
                        <div
                            className={`transfer-operation-button-wrapper ${leftArrowDisabled && 'disabled'}`}
                            onClick={this.toChange('toLeft')}
                            style={{
                                // color: color,
                                // backgroundColor: bgColor
                            }}
                        >
                            {'<'}
                        </div>
                    </div>
                </div>
                <div className="transfer-box">
                    {
                        !leftTitle && !rightTitle ? null :
                            <div className="transfer-list-title">
                                {rightTitle ? rightTitle : ''}
                            </div>
                    }
                    <div className="transfer-right-wrapper">
                        <div className="transfer-title-wrapper">
                            <If condition={!single}>
                                <NCCheckbox
                                    disabled={checkDisabled}
                                    {...allCheckTable[rightAllChecked]}
                                    onChange={this.changeAllCheckbox('right')}
                                >
                                    {rightCheckTitle || language['hrpub-000071']/** 全选 */}
                                </NCCheckbox>
                            </If>
                        </div>
                        {rightData.map((item, index) => {
                            return (
                                <div className="transfer-item-wrapper">
                                    {item.prefix || null}
                                    <NCCheckbox
                                        disabled={checkDisabled}
                                        checked={rightChecked[item.key] && rightChecked[item.key].status}
                                        onChange={this.changeCheckBox(item, 'right')}
                                    >
                                        {`${item.display}(${item.realcode})`}
                                    </NCCheckbox>
                                    {item.suffix || null}
                                </div>
                            );
                        })}
                    </div>
                </div>
            </div>
        );
    }
}

export default Transfer;